import 'package:flutter/material.dart';

class ColumnPage extends StatefulWidget {
  @override
  _ColumnPageState createState() => new _ColumnPageState();
}

class _ColumnPageState extends State<ColumnPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Column"),
      ),
      body: _buildListView(),
    );
  }

  Widget _buildListView() {
    return ListView.builder(
      itemBuilder: (context, index) {
        return _buildListViewItem(index);
      },
      itemCount: columns.length,
    );
  }

  Widget _buildListViewItem(index) {
    return Container(
      padding: EdgeInsets.all(10.0),
      alignment: Alignment.center,
      child: columns[index],
    );
  }
}

List<Widget> columns = <Widget>[
  Column(
    children: <Widget>[
      Text("MainAxisAlignment start"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment center"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment end"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment spaceEvenly"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment spaceAround"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment spaceBetween"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),

  Column(
    children: <Widget>[
      Text("CrossAxisAlignment start"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("CrossAxisAlignment center"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("CrossAxisAlignment end"),
      Container(
        height: 120,
        color: Colors.grey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Container(
              width: 30,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 50,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 70,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
];
